﻿<!DOCTYPE html>
<!--隐患知识库选择-->
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="/static/js/common.js"></script>
    <link href="/static/js/vue-treeselect/vue-treeselect.css" rel="stylesheet" />
    <script src="/static/js/vue-treeselect/vue-treeselect.js"></script>
    <style>
        .vue-treeselect__control {
            height: 100%;
            border: none;
            background: none;
            border: 1px solid #DCDFE6;
        }

        .vue-treeselect__placeholder {
            top: -3px;
        }

        .vue-treeselect__single-value {
            top: -3px;
        }

        .el-tree {
            padding-left: 5px;
        }
    </style>

</head>

<body>
    <div id="app" v-cloak>
        <el-row>
            <el-col :span="4">
                <div class="tree_lay">
                    <h4 class="title clearfix"><strong>类别</strong></h4>
                    <el-tree :data="TreeData" :props="defaultProps" @node-click="handleNodeClick">
                        <span slot-scope="scope">
                            <span>
                                <i :class="scope.data.icon"></i>
                                <template>
                                    <span v-if="scope.data.icon == 'tree-open'"
                                          style="color:#12489e">{{ scope.node.label }}</span>
                                    <span v-else-if="scope.data.icon == 'tree-close'"
                                          style="color: #12489e">{{ scope.node.label }}</span>
                                    <span v-else>{{ scope.node.label }}</span>
                                </template>
                            </span>
                        </span>
                    </el-tree>
                </div>
            </el-col>
            <el-col :span="20">
                <el-form label-position="right" ref="form" :inline="true" :model="formInline" class="demo-form-inline"
                         style="margin-bottom: 15px;">
                    <el-row>
                        <el-col class="head-tool">
                            <el-button type="primary" @click="onSubmit">{{col.btnSelect}}</el-button>
                            <el-button type="primary" @click="onSubmitForm()">{{col.btnSubmit}}</el-button>
                            <el-button type="primary" @click="parent.ListItem.dialogVisible=false">
                                {{col.btnBack}}
                            </el-button>
                        </el-col>
                    </el-row>
                    <el-row class="popupW100">
                        <!--<list-factorys v-model="formInline.model.CreateFactory" @change="factoryChange"></list-factorys>-->


                        <el-col :xs="12" :sm="12" :md="8" :lg="8" :xl="6">
                            <div class="elst-select-mini">
                                <el-form-item>
                                    <el-input v-model="formInline.model.InvestigationProject"
                                              :placeholder="RisksManagement.OperationsAndActivities.CheckStandard"
                                              size="mini">
                                        <template slot="prepend">
                                            {{'排查项目'+mark.m}}
                                        </template>
                                    </el-input>
                                </el-form-item>
                            </div>
                        </el-col>
                        <el-col :xs="12" :sm="12" :md="8" :lg="8" :xl="6">
                            <div class="elst-select-mini">
                                <el-form-item>
                                    <el-input v-model="formInline.model.InvestigationContents"
                                              :placeholder="RisksManagement.OperationsAndActivities.RiskOfViolation"
                                              size="mini">
                                        <template slot="prepend">
                                            {{'排查内容与排查标准'+mark.m}}
                                        </template>
                                    </el-input>
                                </el-form-item>
                            </div>
                        </el-col>
                    </el-row>
                </el-form>
                <!--highlight-current-row                           @current-change="currentSelectionChange"-->
                <el-table ref="table" stripe :data="ListItem.tableData" :row-key="getRowKeys"
                          :height="ListItem.tableHeight" @selection-change="handleSelectionChange" row-style="height:10px"
                          style="width: 100%" border>


                    <el-table-column type="selection" align="center" width="50" :reserve-selection="true">
                    </el-table-column>
                    <el-table-column type="index" :label="RisksManagement.OperationsAndActivities.id"
                                     :index="indexMethod" width="50" show-overflow-tooltip="true"></el-table-column>
                    <el-table-column prop="investigationProject" min-width="150" show-overflow-tooltip="true" :label="'排查项目'">
                    </el-table-column>
                    <el-table-column prop="investigationContents" min-width="150" show-overflow-tooltip="true" :label="'排查内容与排查标准'">
                    </el-table-column>
                    <el-table-column prop="riskLevelText" min-width="150" show-overflow-tooltip="true" :label="'隐患等级'">
                    </el-table-column>


                </el-table>
                <el-row type="flex" justify="end">
                    <el-pagination ref="page" @size-change="handleSizeChange" @current-change="handleCurrentChange"
                                   :current-page="ListItem.currentPage" :page-sizes="ListItem.pagesizes"
                                   :page-size="ListItem.pagesize" :layout="ListItem.layout" :total="ListItem.total">
                    </el-pagination>
                </el-row>
            </el-col>
        </el-row>
    </div>
    <script type="text/javascript">
        Vue.component('treeselect', VueTreeselect.Treeselect)
        app = new Vue({
            el: '#app',
            data: function () {
                return {
                    //页面内左树
                    TreeData: [],
                    defaultProps: {
                        children: 'children',
                        label: 'name'
                    },
                    callBackData: [],
                    callBackObj: {},
                    //页面内数据初始化
                    ListItem: ListItem,
                    formInline: {
                        model: {
                            InvestigationContents: '',
                            InvestigationProject: '',
                            baseTypes: []
                        },
                        offset: 0,
                        limit: 10
                    }
                }
            },

            mounted: function () {
                //初始化数据
                this.GetPageData(1);
                //初始化区域
                this.GetTreeData();
                //列表高度自适应
                tablehigh(this);
            },
            methods: {
                //解決edge下select bug
                visibleChange: function (isVisible) {
                    visibleChange(isVisible)
                },
                //factoryChange: function () {
                //    this.GetPageData(1);
                //    this.TreeData = GetAreaTreeData(this, this.formInline.model.CreateFactory);
                //},
                //获取分页数据
                GetPageData: function (currentIndex) { GetPageData(this, currentIndex, '/api/YH_BasisInformation/GetListExtend'); },
                //提交
                onSubmitForm: function () {
                    var data = this.callBackData;
                    var thisUsers = parent.app.Form.Standard;

                    if (data) {
                        data.forEach(function (v) {

                            var isnot = true;
                            if (thisUsers) {
                                for (var i = 0; i < thisUsers.length; i++) {
                                    if (thisUsers[i].standardID == v.id) {
                                        isnot = false;
                                    }

                                }
                            }
                            if (isnot) {
                                thisUsers.unshift({
                               
                                    type: "基础库",
                                    typeID: v.typeID,
                                    typeText: v.typeText,
                                    investigationProject: v.investigationProject,
                                    investigationContents: v.investigationContents,
                                    riskLevel: v.riskLevel,
                                    riskLevelText: v.riskLevelText,
                                    searchMajorCode:'YH_BasisInfomation',
                                    standardID: v.id,
                                })
                            }


                        });
                    }
                    console.log('thisUsers', thisUsers)
                    this.callBackData = [];
                    parent.app.ListItem.dialogVisible = false;
                },
                //表格序号连续化
                indexMethod: function (index) { return (this.ListItem.currentPage - 1) * this.ListItem.pagesize + index + 1; },
                handleNodeClick: function (data) {
                    //当前节点如果为最底层的才触发新的查询?暂时先这么处理,如果每层节点都查询就把判断去掉,并在接口逻辑模糊查询
                    if (!data.children) {
                        this.formInline.model.baseTypes = [];
                        if (data.id) {
                            this.formInline.model.baseTypes.push(data.id);
                        }
                        this.onSubmit();
                    } else {
                        if (data.icon == "tree-open") {
                            data.icon = "tree-close"
                        } else (
                            data.icon = "tree-open"
                        )
                    }

                },
                GetTreeData: function () {
                    var mythis = this;
                    myAjax("get", this, '/api/yh/GetListSub', null, function (response) {
                        var dataSource = response.data;
                        var data = MenuHelper(dataSource, guidEmpty);
                        mythis.TreeData = data;
                        mythis.TreeData.unshift({ id: null, name: '全部', Id: null })//初始化无父级的选项
                    }, false);
                },
                //列表选择触发
                handleSelectionChange: function (val) { this.callBackData = val; },
                //查询方法
                onSubmit: function () { onSubmit(this); },
                //pagesize改变 触发方法
                handleSizeChange: function (val) { handleSizeChange(this, val); },
                //跳页触发方法
                handleCurrentChange: function (val) { handleCurrentChange(this, val); },
            }
        });
        function tablehigh(mythis) {
            setTableHigh(mythis);
            setPageHeight();
            window.onresize = function () {
                setTableHigh(mythis);
            }
        }
        function setTableHigh(mythis) {
            mythis.$nextTick(function () {
                var margin = 0;
                if ($("#app > .el-row:first-child").length > 0)
                    margin = 8;

                var offsetTop = 0;
                if (mythis.$refs && mythis.$refs.table && mythis.$refs.table.$el)
                    offsetTop = mythis.$refs.table.$el.offsetTop;
                if (mythis && mythis.ListItem)
                    mythis.ListItem.tableHeight = window.innerHeight -
                        offsetTop - PAGINATION_HEIGHT - margin - 50;
            })

        }
        function MenuHelper(list, pid) {
            var result = [];
            list.forEach(function (v, i) {
                if (!v.pid) v.pid = guidEmpty;
                if (v.pid == pid) {
                    var obj = {};
                    obj.id = v.id + '';
                    obj.name = v.name + '';
                    obj.icon = 'tree-item';
                    var nextObj = MenuHelper(list, v.id);
                    if (nextObj.length > 0) {
                        obj.children = nextObj;
                        obj.icon = 'tree-open';
                    }
                }
                if (obj)
                    result.push(obj)
            })
            return result;
        }
        ////该业务部分高性能去重
        ////es5 排序去重
        //function distinct(a, b) {
        //    //debugger;
        //    var arr = a;
        //    if (b) arr = a.concat(b)
        //    var compare = function (obj1, obj2) {
        //        var id1 = obj1.id;
        //        var id2 = obj2.id;
        //        if (id1 < id2) return -1;
        //        else if (id1 > id2) return 1;
        //        else return 0;
        //    }
        //    arr = arr.sort(compare)
        //    var result = [arr[0]]
        //    for (var i = 1, len = arr.length; i < len; i++) {
        //        if (arr[i].id !== arr[i - 1].id)
        //            result.push(arr[i])
        //    }
        //    return result;
        //}
        ////该业务部分高性能去重
        ////es6 for of遍历去重
        //function distinct(a, b) {
        //    //debugger;
        //    var arr = a;
        //    if (b) arr = a.concat(b)
        //    var result = []
        //    var obj = {}

        //    for (var i of arr) {
        //        //console.log(i, obj[i.id])
        //        if (!obj[i.id]) {
        //            result.push(i)
        //            obj[i.id] = 1
        //        }
        //    }

        //    return result
        //}
    </script>
    <script>
        $(function () {
            var appHeight = (document.documentElement.clientHeight - 160) + 'px'
            $(".tree_lay .el-tree").css('height', appHeight);


            $("body").bind('resize', function () {
                var appHeight = (document.documentElement.clientHeight - 160) + 'px'
                $(".tree_lay .el-tree").css('height', appHeight);
            });
        })
    </script>
</body>

</html>